<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        small{
            color: red;
        }
    </style>
</head>
<body>
<form action="register" style="display: grid;
    grid-template-columns: 50px 300px auto; grid-gap: 10px">
    <label for="">姓名:</label><input v-model="user.name"><small>{{errors.name}}</small>
    <label for="">绰号:</label><input v-model="user.alias"><small>{{errors.alias}}</small>
    <label for="">年龄:</label><input v-model="user.age" type="number"><small>{{errors.age}}</small>
    <label for="">学历:</label>
        <span>
            <span th:each=" edu : ${edus} " >
                <input v-model="user.edu" type="radio" th:value="${edu}">
                <span th:text="${edu}"></span>
            </span>
        </span><small>{{errors.edu}}</small>
    <label for="">密码:</label><input v-model="user.pwd" type="password"><small>{{errors.pwd}}</small>
    <label for="">邮箱:</label><input v-model="user.email" type="email"><small>{{errors.email}}</small>
    <label for="">电话:</label><input v-model="user.phone" type="number"><small>{{errors.phone}}</small>
    <label for="">爱好:</label>
        <span>
            <span th:each=" like : ${likes} " >
                <input v-model="user.likes" type="checkbox" th:value="${like}">
                <span th:text="${like}"></span>
            </span>
        </span><small>{{errors.likes}}</small>
    <label for="">生日:</label><input v-model="user.birthday" type="date"><small>{{errors.birthday}}</small>
    <label for="">头像:</label>
        <span>
            <img :src="user.head" alt="用户头像, 点击上传"
                 style="width: 100px; height: 150px; object-fit: cover; display: block; border: 1px blue solid; cursor: pointer"
                onclick="headFile.value='';headFile.click()">
            <input type="file" id="headFile" style="display: none"
                @change="uploadHead">
        </span>

        <small>{{errors.birthday}}</small>
    <label for=""></label>
        <div style="text-align: right">
            <input type="submit" value="注册" @click.prevent="commit">
        </div>
</form>
<script>
    var v = new Vue({
        el : "form",
        data : {
            user:{likes:[]},
            errors:{}
        },
        methods:{
            commit(){
                axios.post("register", this.user).then(res=>{
                    // 清空 errors 错误信息
                    this.errors = {};
                    if(res.data.code == 1){
                        this.$message("用户注册成功!");
                    } else {
                        console.info(res.data.data);
                        if(Array.isArray(res.data.data)){
                            res.data.data.forEach(e=>{
                                if(this.errors[e.field]){
                                    this.errors[e.field] += " , "+e.defaultMessage;
                                } else {
                                    this.errors[e.field] = e.defaultMessage;
                                }
                            })
                        } else {
                            this.$alert(res.data.msg);
                        }
                    }
                })
            },
            uploadHead(){
                let fd = new FormData();
                fd.append("head", headFile.files[0]);
                axios.post("uploadHead",fd).then(res=>{
                    if(res.data.code){
                        this.user.head = res.data.data;
                        // 强制刷新
                        this.$forceUpdate();
                        this.$message(res.data.msg);
                    } else {
                        // ElementUI 告警窗口
                        this.$alert(res.data.msg);
                    }
                });

            }
        }
    })
</script>

<hr>
<ul>
    <li th:each=" j : ${jobs}" th:text="${j.name}"></li>
</ul>









</body>
</html>